<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
    <script src="https://kit.fontawesome.com/09681efc7e.js" crossorigin="anonymous"></script>
    <title>View My Work</title>
</head>
<body>
  
   <header>
    <div class="menu-btn">
        <div class="btn-line"></div>
        <div class="btn-line"></div>
        <div class="btn-line"></div>
    </div>
        <nav class="menu">
            <div class="menu-branding">
                <div class="portrait"></div>
            </div>
            <ul class="menu-nav">
                <li class="nav-item ">
                    <a href="index.html" class="nav-link">
                        Home
                    </a>
                </li>
                <li class="nav-item ">
                    <a href="about.html" class="nav-link">
                        About Me
                    </a>
                </li>
                <li class="nav-item current">
                    <a href="work.html" class="nav-link">
                        My Work
                    </a>
                </li>
                <li class="nav-item">
                    <a href="contacts.html" class="nav-link">
                       How To Reach Me
                    </a>
                </li>
              
            </ul>
        </nav>
   </header>

   <main id="work">
    <h1 class="lg-heading">
        My<span class="text-secondary">Work</span> 
    </h1>
    <h2 class="sm-heading">
        Check out some of my projects...
    </h2>
    <div class="projects">
      <div class="item">
        <a href=""><img src="img/projects/project1.jpg" alt="project"></a>
        <a href="" class="btn-light">
        <i class="fas fa-eye"></i> Project
    </a>
    <a href="" class="btn-dark">
        <i class="fa fa-github"></i>Github
    </a>
      </div>
      <div class="item">
        <a href=""><img src="img/projects/project2.jpg" alt="project"></a>
        <a href="" class="btn-light">
        <i class="fas fa-eye"></i> Project
    </a>
    <a href="" class="btn-dark">
        <i class="fa fa-github"></i>Github
    </a>
      </div>
      <div class="item">
        <a href=""><img src="img/projects/project3.jpg" alt="project"></a>
        <a href="" class="btn-light">
        <i class="fas fa-eye"></i> Project
    </a>
    <a href="" class="btn-dark">
        <i class="fa fa-github"></i>Github
    </a>
      </div>
      <div class="item">
        <a href=""><img src="img/projects/project4.jpg" alt="project"></a>
        <a href="" class="btn-light">
        <i class="fas fa-eye"></i> Project
    </a>
    <a href="" class="btn-dark">
        <i class="fa fa-github"></i>Github
    </a>
      </div>
      <div class="item">
        <a href=""><img src="img/projects/project5.jpg" alt="project"></a>
        <a href="" class="btn-light">
        <i class="fas fa-eye"></i> Project
    </a>
    <a href="" class="btn-dark">
        <i class="fa fa-github"></i>Github
    </a>
      </div>
    </div>
   </main>

   <footer id="main-footer">
    KristinaBorovskikh &copy; 2024
   </footer>

   <script src="js/main.js"></script>
</body>
</html>
